<!DOCTYPE html>
<html lang="en">

	<head>
		<title>重庆农气-运行监控子系统</title>
		<style>
			body {
				line-height: inherit;
			}
			
			.align-center {
				text-align: center;
			}
		</style>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/fullcalendar.css" />
		<link rel="stylesheet" href="css/matrix-style.css" />
		<link rel="stylesheet" href="css/matrix-media.css" />
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/jquery.gritter.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript">
			var map, baseLayer, dragPan,markers, framedCloud, p;

			function init() {
				var polygon = "106.189555,29.062612 106.189552,29.062685 106.18967,29.06274 106.190195,29.062873 106.1909,29.063107 106.191047,29.06318 106.19135,29.06343 106.19168,29.063517 106.192003,29.063618 106.192232,29.063713 106.19237,29.063727 106.192707,29.06387 106.19325,29.064042 106.193758,29.064122 106.193827,29.064192 106.193993,29.064287 106.194552,29.064833 106.194735,29.06505 106.194848,29.065173 106.194897,29.065298 106.194783,29.066278 106.194815,29.066468 106.194857,29.066655 106.19486,29.066835 106.194923,29.06712 106.195143,29.067708 106.1954,29.06817 106.195425,29.06835 106.195337,29.068648 106.195203,29.069213 106.195237,29.069323 106.195372,29.069455 106.195453,29.069495 106.195578,29.069482 106.195843,29.069658 106.196022,29.069785 106.196118,29.069828 106.196615,29.06982 106.196688,29.069838 106.196993,29.0702 106.197108,29.070278 106.19729,29.070342 106.197488,29.070488 106.197672,29.070697 106.197833,29.071013 106.19808,29.071592 106.198113,29.071892 106.198103,29.07199 106.198007,29.072218 106.198008,29.072295 106.197985,29.072452 106.197778,29.072948 106.197748,29.073245 106.197647,29.073672 106.19747,29.074198 106.1974,29.074468 106.197405,29.074497 106.197382,29.074725 106.197325,29.074757 106.196758,29.07516 106.196,29.075697 106.195763,29.075828 106.195635,29.075877 106.195168,29.075935 106.19396,29.075977 106.193673,29.07596 106.193383,29.075902 106.192988,29.075723 106.192585,29.075515 106.191865,29.075192 106.191472,29.075065 106.190303,29.074812 106.18986,29.074672 106.189555,29.074608 106.189017,29.074428 106.18865,29.074363 106.188578,29.074295 106.188248,29.074213 106.188175,29.074177 106.18809,29.07416 106.187917,29.074083 106.186763,29.073842 106.185888,29.073702 106.185192,29.073768 106.184518,29.073555 106.183697,29.0732 106.183435,29.073057 106.182585,29.0727 106.181107,29.072115 106.180685,29.071905 106.18031,29.071673 106.180065,29.071527 106.180055,29.071417 106.180167,29.071328 106.180128,29.0712 106.180237,29.070993 106.18067,29.07045 106.181162,29.069915 106.181318,29.069777 106.181583,29.06958 106.181655,29.069502 106.181732,29.069333 106.18167,29.069145 106.181603,29.06905 106.181527,29.069008 106.181427,29.068863 106.181402,29.068793 106.18143,29.068527 106.181493,29.068368 106.181845,29.067937 106.182072,29.067728 106.182217,29.06756 106.182317,29.067377 106.182333,29.067293 106.182325,29.067217 106.182187,29.06705 106.182047,29.066913 106.18192,29.06674 106.18179,29.066455 106.181558,29.065792 106.181385,29.065297 106.181307,29.064918 106.181267,29.064648 106.181288,29.064435 106.181478,29.064157 106.181568,29.0639 106.181598,29.063497 106.181563,29.063133 106.181345,29.062265 106.181163,29.061613 106.181055,29.060925 106.1811,29.060268 106.181067,29.060053 106.181,29.0599 106.18083,29.059592 106.180825,29.059517 106.18088,29.059358 106.18093,29.059282 106.181238,29.059043 106.181425,29.0588 106.181728,29.058268 106.181808,29.057987 106.181812,29.057598 106.181752,29.05678 106.181718,29.055438 106.18168,29.05505 106.181627,29.054725 106.181635,29.054502 106.181657,29.054388 106.18184,29.053992 106.181957,29.053842 106.182202,29.053648 106.182322,29.053492 106.182362,29.053405 106.18238,29.053312 106.182327,29.052988 106.182345,29.052767 106.18253,29.052543 106.182747,29.052305 106.182862,29.052133 106.182968,29.051838 106.183087,29.051378 106.18323,29.051045 106.18336,29.05084 106.183952,29.05017 106.184027,29.050107 106.184232,29.05003 106.18471,29.050017 106.184977,29.05003 106.185537,29.05014 106.185802,29.050158 106.18595,29.05014 106.186112,29.050077 106.186233,29.050113 106.186258,29.050078 106.186287,29.050093 106.186327,29.050183 106.186468,29.050305 106.186767,29.05045 106.187042,29.050483 106.187213,29.050553 106.187372,29.050662 106.18743,29.05074 106.187493,29.050905 106.187483,29.05109 106.187417,29.05127 106.187078,29.05164 106.18704,29.05171 106.187028,29.051782 106.187043,29.051868 106.187263,29.052333 106.187425,29.052825 106.187493,29.053102 106.187768,29.053905 106.187913,29.054212 106.187958,29.054385 106.187942,29.054572 106.187918,29.05466 106.187955,29.054823 106.188033,29.055017 106.188085,29.055107 106.188162,29.055188 106.188333,29.055298 106.188447,29.055448 106.188468,29.05562 106.188362,29.055977 106.188363,29.056178 106.188395,29.056278 106.188497,29.056297 106.188685,29.056518 106.188728,29.056588 106.188697,29.056902 106.188572,29.05734 106.188565,29.057552 106.188585,29.058003 106.188635,29.058235 106.188785,29.058783 106.188837,29.059368 106.188848,29.05969 106.18893,29.060247 106.189008,29.060668 106.18901,29.060768 106.189002,29.060855 106.188795,29.061303 106.18872,29.061683 106.188687,29.061878 106.1885,29.062363 106.188495,29.062452 106.188603,29.062715 106.18867,29.06279 106.188875,29.062862 106.188978,29.062915 106.18911,29.06292 106.189555,29.062612 ";
				var resolutions = [9783.93962049996, 4891.96981024998, 2445.98490512499, 1222.992452562495, 611.4962262813797, 305.74811314055756, 152.87405657041106, 76.43702828507324, 38.21851414253662, 19.10925707126831, 9.554628535634155, 4.77731426794937, 2.388657133974685];
				var matrixIds = new Array(13);
				for (var i = 0; i < 13; i++) {
					matrixIds[i] = {
						identifier: i
					};
				};
				//初始化地图拖拽控件类
				dragPan = new SuperMap.Control.DragPan();
				//当该属性为true，拖拽地图时，鼠标移动到地图可视区域外依然有效。默认为false
				dragPan.documentDrag = true;
				//设置是否使用拖拽动画。默认为false，不使用动画
				dragPan.enableKinetic = true;
				//执行动画的间隔，默认为10，单位是毫秒
				dragPan.kineticInterval = 20;
				map = new SuperMap.Map("map", {
					controls: [
						dragPan,
						new SuperMap.Control.Zoom(), new SuperMap.Control.Navigation()
					],
					maxExtent: new SuperMap.Bounds(8176078.237500001, 379653.95419999957, 15039542.061499998, 7087813.645199999)
				});
				//底图图层
				baseLayer = new SuperMap.Layer.WMTS({
					name: "Maps_StreetMap",
					url: "http://172.24.186.81:6080/arcgis/rest/services/Maps/StreetMap/MapServer/wmts",
					layer: "Maps_StreetMap",
					style: "default",
					matrixIds: matrixIds,
					matrixSet: "default028mm",
					format: "image/jpg",
					resolutions: resolutions, //分辨率数组
					tileOrigin: new SuperMap.LonLat(-20037508.342787, 20037508.342787), //瓦片矩阵左上角
					requestEncoding: "KVP"
				});
				map.addLayers([baseLayer]);
				map.setCenter(new SuperMap.LonLat(11997336, 3544032), "4");
				dragPan.activate();
				//----------------------
				//初始化标记图层类
				markers = new SuperMap.Layer.Markers("Markers");
				size = new SuperMap.Size(16, 16);
				offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
				icon = new SuperMap.Icon('theme/point.ico', size, offset);
				for (var i = 0; i < data.length; i++) {
					p = lonLat2WebMercator(data[i]["longitude"], data[i]["latitude"]);
					//初始化标记覆盖物类
					var marker = new SuperMap.Marker(new SuperMap.LonLat(p.x, p.y), icon);
					//添加覆盖物到标记图层
					markers.addMarker(marker);
					//注册 click 事件,触发 mouseClickHandler()方法
					marker.events.on({
						"click": mouseClickHandler,
						"touchstart": mouseClickHandler, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
						"scope": data[i]
					});
				} //------------
				map.addLayers([markers]);
			}
			var infowin = null;
			//定义mouseClickHandler函数，触发click事件会调用此函数
			function mouseClickHandler() {
				var data = this;
				var p = lonLat2WebMercator(data["longitude"], data["latitude"]);
				var lonlat = new SuperMap.LonLat(p.x, p.y)
				closeInfoWin();
				var contentHTML = "<div style='width: 300px; height: 200px;'><div style='float:left'><div style=' float:left; width:100px ; '> <img alt='头像' src=";
				contentHTML += "img/demo/av1.jpg";
				contentHTML += " class='img-rounded' /></div><div style='float:left; width: 200px; '><div class='label label-info'> 姓名： </div>  ";
				contentHTML += data["name"];
				contentHTML += "</br><div class='label label-info'> 电话： </div> ";
				contentHTML += 123456789101;
				contentHTML += "</br><div class = 'label label-info' > 地址： </div > ";
				contentHTML += "重庆";
				contentHTML += "</div></div><div style='width:300px;float:left;background-color:#DDDDDD; padding: 10px 5px 15px 20px;  border-radius: 5px;'><h4>介绍： </h4> <p>";
				contentHTML += "Hello, world!";
				contentHTML += "</p> </div></div > "
					//初始化FramedCloud类
				framedCloud = new SuperMap.Popup.FramedCloud(
					"chicken",
					lonlat,
					null,
					contentHTML,
					null,
					true,
					null,
					true
				);
				infowin = framedCloud;
				map.addPopup(framedCloud);
			}

			function closeInfoWin() {
				if (infowin) {
					try {
						infowin.hide();
						infowin.destroy();
					} catch (e) {}
				}
			}
			//经纬度转Web墨卡托  
			function lonLat2WebMercator(a, b) {
				var mercator = new po();
				var x = a * 20037508.34 / 180;
				var y = Math.log(Math.tan((90 + b) * Math.PI / 360)) / (Math.PI / 180);
				y = y * 20037508.34 / 180;
				mercator.x = x;
				mercator.y = y;
				return mercator;
			}

			function po() {
				po.prototype.x = 0;
				po.prototype.y = 0;
			}
		</script>
	</head>

	<body class="container" onload="init()">

		<!--Header-part-->
		<div class="header">
			<div class="top"></div>
			<ul class="nav">
				<li><a href="index.html" class="click">首页</a></li>
				<li><a href="temp.html">气温监测</a></li>
				<li><a href="precipitation.html">降水监测</a></li>
				<li><a href="soil.html">墒情监测</a></li>
				<li><a href="product.html">产品统计</a></li>
				<li><a href="vip.html">大户分布</a></li>
				<li><a href="farmland.html">农田分布</a></li>
				<li><a href="agrinfo.html">农情分布</a></li>
				<li><a href="expert.html">专家风采</a></li>
				<li><a href="state.html">运行状态</a></li>
			</ul>
			<div class="login">
				<a href="javascript:void(0);" id="login">登录</a>
				<a href="javascript:void(0);" id="exit">退出登录</a>
			</div>
		</div>

		<!--main-container-part-->
		<div id="content">
			<!--breadcrumbs-->
			<div id="content-header">
				<div id="breadcrumb"> <a href="index.html" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 大户分布</a></div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div id="map" style="height: 600px; width: 100%;margin: 0;padding: 0;border: 0;">
					</div>
				</div>

				<div class="row-fluid">
					<div id="footer" class="span12"> 2016 &copy; 重庆市气象局
						<a href="#"></a>
					</div>
				</div>

	</body>
	<script src="js/my/data.js"></script>
	<script src="js/excanvas.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/matrix.js"></script>
	<script src="libs/SuperMap.Include.js"></script>
	<script src="js/monitor.js"></script>

</html>